html, body{
    height: 100%;
    min-height: 100%;
    position: relative;
    overflow: hidden;
}

#time-line{
    position: fixed;
    width:100%;
    height: 70px;
    padding-top:20px;
    bottom: 0px;
    overflow-x: hidden;
    white-space: nowrap;
    background: rgba( 0, 0, 0, .3 );
    border-top:1px solid rgba( 255, 255, 255, .1 );
    box-shadow: 1px 0px 1px 1px rgba( 0, 0, 0, .3 );
}


#time-line:before{
    content: "";
    display: block;
    width:100%;
    height: 5px;
    background: rgba( 255, 255, 255, .5 );
    border-top:1px solid rgba( 0, 0, 0, .4 );
    border-bottom:1px solid rgba( 0, 0, 0, .3 );
}


#time-line div.warp{
    white-space: nowrap;
    position: absolute;
    top:27px;
    left:110%;
}

#time-line section{
    display: inline-block;
    position: relative;
    font-size:12px;
    top:15px;
    width:1px;
    height:1px;
    margin-right:150px;
    font-weight: bold;
    cursor: pointer;
    vertical-align: top;
    color:rgba( 255, 255, 255, .5 );
}

#time-line section span.label{
    position: absolute;
    width:100px;
    text-align: center;
    top:0;
    left:50%;
    margin-left:-50px;
}

#time-line section:before{
    content: "";
    display: block;
    width:8px;
    height:8px;
    border:4px solid rgba( 255, 255, 255, .9 );
    border-radius: 100px;
    position: absolute;
    background: #444;
    left:50%;
    top:-26px;
    margin-left:-6px;
    box-shadow: 1px 1px 1px 1px rgba( 0, 0, 0, .4 );
}
#time-line section.newyear{
    font-size:20px;
}
#time-line section.newyear:before{
    background: rgb( 0, 50, 255 );
}

#time-line section.action{
    font-size:18px;
    color:rgba( 255, 255, 255, .8 );
}
#time-line section.action:before{
    background:rgb( 255, 50, 0 );
    height:14px;
    width:14px;;
    border-width: 3px;
    margin-left:-10px;
    top:-29px;
}

.panel{
    position: fixed;
    display: none;
}


img.loading{
    position: fixed;
    left:-9999999px;
    top:50%;
    margin-left:-64px;
    margin-top:-51px;
}